/*!
 * @author Isis (igraziatto) Graziatto <isis.g@vanillaforums.com>
 * @copyright 2009-2018 Vanilla Forums Inc.
 * @license GPL-2.0-only
 */

/* -------------------------------------------------------------- *\
    Styles
\* -------------------------------------------------------------- */

$GroupBanner-height: 230px;
$GroupIcon-size: 140px;
$GroupIcon-overlap: #{50px + $utility-baseUnitTriple};

.Section-Group {
    .Excerpt + .HasNew {
        margin-left: $utility-baseUnitHalf;
    }

    .H {
        display: block;
        width: 100%;
        float: none;
        text-align: center;
        font-size: $global-title_fontSize;

        @include maxWidth {
            text-align: left;
        }
    }

    .PageControls.PageControls .BoxNewDiscussion {
        margin-right: 0;
    }

    .BoCloseButtons,
    .Button-Controls {
        @include maxWidth {
            display: block;
            width: 100%;
        }
    }

    .Button-Controls {
        .ButtonGroup.Multi {
            @include maxWidth {
                padding: 0;

                .Primary:first-child {
                    width: 100%;
                }
            }
        }

        @include maxWidth {
            .NewEventButton,
            .Button:not(.Handle),
            .ButtonGroup {
                margin: 0;
                width: 100%;
                text-align: center;
            }
        }
    }

    .BoxButtons {
        @include maxWidth {
            display: block;
            width: 100%;
        }
    }
}

.Section-Group.Section-Discussion {
    .H {
        text-align: left;
    }

    .Group-Header {
        display: none;
    }
}

.Section-Group.NoPanel,
.Section-GroupList {
    .Frame-content {
        > .Container {
            max-width: $global-main_width;
        }
    }

    .MainContent {
        width: 100%;
    }
}

.Section-GroupList {
    .groupToolbar {
        display: flex;
        justify-content: flex-end;
    }

    .groupToolbar-newGroup {
        @include maxWidth {
            width: 100%;
            text-align: center;
        }
    }

    .MainContent {
        h1 {
            display: none;
        }

        .Groups.H,
        .H {
            display: block;
            float: none;
            text-align: center;
            font-size: $global-title_fontSize;
            margin-bottom: $global-block_margin;
        }

        > .Button.Primary {
            float: right;

            @include maxWidth {
                width: 100%;
                text-align: center;
            }
        }
    }

    .UserLink,
    .Panel {
        display: none;
    }

    .Item-Icon {
        margin: 0 0 $utility-baseUnitDouble;
    }

    .DataList .Item {
        .Title,
        .GroupDescription {
            margin: 0;
        }

        .ItemContent.ItemContent {
            padding-left: 0;
        }

        .Options {
            flex-direction: row;

            .Buttons {
                margin-left: $utility-baseUnitHalf;
            }
        }

        @include maxWidth {
            display: flex;
            flex-direction: row-reverse;
            flex-wrap: wrap;
            align-items: flex-start;
            justify-content: space-between;

            .ItemContent {
                flex: 1;
                padding-left: 0;
                padding-right: 0;
            }

            .Excerpt {
                margin-top: $utility-baseUnitDouble;
            }

            .Title {
                padding-right: $icon-default_size;
            }
        }
    }
}

@if ($staticVariables) {
    .Group-Box {
        clear: both;

        .Meta {
            margin-right: -$utility-baseUnit;
            margin-left: -$utility-baseUnit;
        }
    }
}

@if ($staticVariables) {
    .ButtonGroup.Open .Button.GroupOptionsTitle,
    .Button.GroupOptionsTitle,
    .Button.GroupOptionsTitle:active,
    .Button.GroupOptionsTitle:focus {
        padding: 0;
        border: none;
        background-color: transparent;
        color: transparent;
        max-width: 20px;

        .SpDropdownHandle {
            display: none;
        }

        &::before {
            @include icon;
            content: $icon-cog;
            color: $global-color_fg;
            font-size: $icon-default_size;
            line-height: $icon-default_size;
        }
    }
}

.Group-Header {
    position: relative;
    display: flex;
    flex-direction: column;

    .Group-Buttons,
    .OptionsMenu {
        display: inline-block;
        float: none;
    }
}

.Group-Banner {
    @if ($staticVariables) {
        height: $GroupBanner-height;
    }
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    margin-bottom: $utility-baseUnitTriple;
    box-shadow: inset 0 0 3px 1px rgba($global-color_black, 0.4);

    @include maxWidth($theme-breakpoint_tablet) {
        height: calc(#{$GroupBanner-height} - 50px);
    }
}
.Button-Controls.Button-Controls {
    @if ($staticVariables) {
        order: 2;
    }
    margin-right: 0;
    display: flex;
    justify-content: flex-end;

    @include maxWidth {
        flex-wrap: wrap;

        .Button + .Button {
            margin-top: $utility-baseUnitTriple;
        }
    }

    @if ($staticVariables) {
        .Button:nth-child(2) {
            margin-left: $utility-baseUnitHalf;
            background-color: transparent;
            border-color: $global-color_primary;
            color: $global-color_primary;

            &:focus,
            &:hover {
                border-color: $global-color_primary;
                background-color: $global-color_primary;
                color: $global-color_white;
            }

            @include maxWidth {
                margin-left: 0;
            }
        }
    }
}

.GroupOptions {
    position: absolute;
    top: calc(#{$GroupBanner-height} + #{$utility-baseUnitTriple});
    right: 0;

    @include maxWidth($theme-breakpoint_tablet) {
        top: calc((#{$GroupBanner-height} - 50px) + #{$utility-baseUnitTriple});
    }
}

.Group-Icon-Big-Wrap {
    @if ($staticVariables) {
        position: absolute;
        top: $GroupBanner-height;
        height: $GroupIcon-size;
        width: $GroupIcon-size;
        background-color: $global-color_white;
        margin: -$GroupIcon-overlap $utility-baseUnitTriple $utility-baseUnitTriple $utility-baseUnitTriple;
        border-radius: $component_borderRadius;
        box-shadow: 0 0 0 1px rgba($global-color_black, 0.2);
    }

    .Group-Icon-Big {
        width: 100%;
        height: 100%;
        border-radius: inherit;
        @if ($staticVariables) {
            border: 3px solid $global-color_white;
        }
    }

    @if ($staticVariables) {
        @include maxWidth {
            display: none;
        }
    }
}

.Group-Title {
    margin: 0 0 $utility-baseUnitDouble;
    font-size: $global-subTitle_fontSize;
    padding-right: 20px;

    @if ($staticVariables) {
        a {
            @include font-heading-link;
            font-size: inherit;
            text-shadow: none;

            &:focus,
            &:hover {
                color: $theme-heading-hover_color;
            }
        }
    }
}

.Group-Description {
    margin-bottom: $utility-baseUnitTriple;

    @if ($staticVariables) {
        @include maxWidth {
            display: none;
        }
    }
}

.Group-Header-Info {
    padding-left: calc(#{$GroupIcon-size} + (#{$utility-baseUnitTriple} * 2));

    @include maxWidth {
        padding-left: 0;
        margin-bottom: $utility-baseUnitTriple;
    }
}

// if $Group.Icon is not set, don't add the padding
body.noGroupIcon {
    .Group-Header-Info {
        padding-left: 0;
    }
}

@if ($staticVariables) {
    .Group-Meta.Group-Meta {
        margin: 0 -#{$utility-baseUnitHalf};
        font-size: $global-small_fontSize;

        a {
            font-size: inherit;
            color: $component-meta-link_color;

            &:focus,
            &:hover {
                text-decoration: $theme-link-hover_textDecoration;
                color: $component-meta-link-hover_color;
            }
        }

        .MItem {
            margin: 0 $utility-baseUnitHalf;
        }

        .MItem:nth-child(-n + 2) .label {
            font-weight: $global-bold_fontWeight;
        }
    }

    .Group-Content {
        display: inline-block;
        width: 100%;
    }

    .Group-Box .MItem {
        line-height: $global-base_lineHeight;
        white-space: normal;

        &.Hidden {
            display: none;
        }

        a {
            @include ellipsis;
            max-width: 300px;
            display: inline-block;
            vertical-align: bottom;
        }
    }
}

// Over selected on core...
.Group-Header.Group-Header.Group-Header.NoBanner {
    margin-bottom: $utility-baseUnitTriple;
}

.Group-Header.NoBanner {
    min-height: $GroupIcon-size;
    display: flex;

    .Group {
        padding-top: 0;
    }

    .Group-Title {
        padding-top: 0;
    }

    .Group-Header-Info {
        padding-left: calc(#{$GroupIcon-size} + #{$utility-baseUnitTriple});

        @include maxWidth {
            padding-left: 0;
        }
    }

    @if ($staticVariables) {
        .Group-Icon-Big-Wrap {
            position: absolute;
            margin: 0 $utility-baseUnitTriple 0 0;
            z-index: 1;
            flex: 1 0 $GroupIcon-size;
        }
    }

    .GroupOptions {
        top: 0;
        right: 0;
    }
}

.Group-GuestModule {
    border-top: 1px solid #dddee0;
    padding-top: calc(#{$component-vertical_padding} + #{$component-vertical_padding});
}

.Section-Members {
    .DataList .Item {
        @include maxWidth {
            display: flex;
            flex-direction: row-reverse;
            flex-wrap: wrap;

            align-items: flex-start;
            justify-content: space-between;

            @if ($staticVariables) {
                .PhotoWrap {
                    position: absolute;
                    top: $component-base_padding;
                    left: $component-base_padding;
                }
            }

            .Meta {
                margin-top: 0;
            }
        }

        .Buttons {
            margin-right: 0;
        }

        .Title {
            margin-bottom: 0;
        }

        .Excerpt:empty {
            display: none;
        }

        .Meta {
            margin-bottom: 0;
        }

        .MItem {
            line-height: 21px;
        }
    }

    .Group-Header + form,
    .Group-Box {
        margin-bottom: $utility-baseUnitTriple;
    }

    @if ($staticVariables) {
        .Group-RemoveMember {
            @include Button(
                $button-primary_bg,
                $button-primary_fg,
                $button-primary_border,
                $button-primary-hover_bg,
                $button-primary-hover_fg,
                $button-primary-hover_border
            );
        }
    }
}

.Group-MembersPreview {
    .PhotoGrid {
        margin: 0 -#{$utility-baseUnitHalf};
    }

    .PhotoWrap.PhotoWrap.PhotoWrap {
        display: inline-block;
        @include photoWrap;
        margin: 0 $utility-baseUnitHalf;
    }

    .PhotoGridSmall img {
        margin: 0;
    }
}

.Section-Event.Section-Event {
    .AttendeeList.AttendeeList h3 {
        font-size: $global-subTitle_fontSize;
        font-weight: $global-heading_fontWeight;
        margin-bottom: $utility-baseUnitTriple;
        display: flex;
        align-items: center;
        justify-content: space-between;

        @include maxWidth {
            font-size: $global-subTitle_fontSize;
        }
    }

    .FormWrapper.Attending {
        margin: $utility-baseUnitDouble 0;
    }

    .YesAttending,
    .NotAttending,
    .MaybeAttending {
        margin-bottom: $utility-baseUnitDouble;
    }

    .FormTitleWrapper h2 {
        display: none;
    }

    .EventTime {
        label.When {
            display: none;
        }

        label {
            display: block;
        }

        .Timebased a {
            color: $link_default-color;
        }
    }

    .Buttons {
        display: flex;
        justify-content: flex-end;

        .Primary {
            margin-left: $utility-baseUnitHalf;
            order: 2;
        }
    }

    .EventTitle {
        .ButtonGroup {
            margin-top: 0;
        }
    }

    @include maxWidth {
        .FieldInfo {
            display: block;
            width: 100%;
            margin-bottom: $utility-baseUnitDouble;
        }
    }
}

#Form_memberFilter {
    height: calc(#{$formButton_height} + 2px);

    @include maxWidth {
        width: 100%;
        margin-right: 0;
        margin-bottom: $utility-baseUnitHalf;
    }
}

.group-members-filter-box {
    position: relative;
    display: flex;

    @include maxWidth {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    @if ($staticVariables) {
        .Button {
            @include Button;
        }
    }

    .Button + .Button {
        margin-left: $utility-baseUnitHalf;
    }

    @if ($staticVariables) {
        .Button.search {
            @include Button(
                $button-primary_bg,
                $button-primary_fg,
                $button-primary_border,
                $button-primary-hover_bg,
                $button-primary-hover_fg,
                $button-primary-hover_border
            );
        }
    }
}
